/**
 * 主题配色配置
 */
export interface ThemeConfig {
  name: string
  primary: string
  secondary: string
  gradient: string
  gradientFrom: string
  gradientTo: string
  accent: string
  background: string
  cardBg: string
  text: string
  textSecondary: string
  border: string
}

export const themes: Record<string, ThemeConfig> = {
  purple: {
    name: '梦幻紫',
    primary: '#667eea',
    secondary: '#764ba2',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    gradientFrom: '#667eea',
    gradientTo: '#764ba2',
    accent: '#f093fb',
    background: 'linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%)',
    cardBg: '#ffffff',
    text: '#303133',
    textSecondary: '#606266',
    border: '#e4e7ed',
  },
  blue: {
    name: '清新蓝',
    primary: '#4facfe',
    secondary: '#00f2fe',
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    gradientFrom: '#4facfe',
    gradientTo: '#00f2fe',
    accent: '#3b82f6',
    background: 'linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%)',
    cardBg: '#ffffff',
    text: '#0f172a',
    textSecondary: '#475569',
    border: '#cbd5e1',
  },
  green: {
    name: '自然绿',
    primary: '#11998e',
    secondary: '#38ef7d',
    gradient: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)',
    gradientFrom: '#11998e',
    gradientTo: '#38ef7d',
    accent: '#10b981',
    background: 'linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)',
    cardBg: '#ffffff',
    text: '#064e3b',
    textSecondary: '#065f46',
    border: '#bbf7d0',
  },
  orange: {
    name: '活力橙',
    primary: '#fa709a',
    secondary: '#fee140',
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    gradientFrom: '#fa709a',
    gradientTo: '#fee140',
    accent: '#f97316',
    background: 'linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%)',
    cardBg: '#ffffff',
    text: '#7c2d12',
    textSecondary: '#9a3412',
    border: '#fed7aa',
  },
  pink: {
    name: '温柔粉',
    primary: '#f093fb',
    secondary: '#f5576c',
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    gradientFrom: '#f093fb',
    gradientTo: '#f5576c',
    accent: '#ec4899',
    background: 'linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%)',
    cardBg: '#ffffff',
    text: '#831843',
    textSecondary: '#9f1239',
    border: '#f9a8d4',
  },
  dark: {
    name: '深邃黑',
    primary: '#667eea',
    secondary: '#764ba2',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    gradientFrom: '#667eea',
    gradientTo: '#764ba2',
    accent: '#818cf8',
    background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)',
    cardBg: '#1e293b',
    text: '#f1f5f9',
    textSecondary: '#cbd5e1',
    border: '#334155',
  },
  anime: {
    name: '卡通动漫',
    primary: '#ff6b9d',
    secondary: '#ffa8d5',
    gradient: 'linear-gradient(135deg, #ff6b9d 0%, #ffa8d5 50%, #c8a8ff 100%)',
    gradientFrom: '#ff6b9d',
    gradientTo: '#c8a8ff',
    accent: '#ffd93d',
    background: 'linear-gradient(135deg, #fff0f5 0%, #f0e6ff 50%, #e6f3ff 100%)',
    cardBg: '#ffffff',
    text: '#2d1b3d',
    textSecondary: '#6b4c93',
    border: '#ffd1dc',
  },
}

/**
 * 获取当前主题
 */
export function getCurrentTheme(): string {
  return localStorage.getItem('theme') || 'purple'
}

/**
 * 设置主题
 */
export function setTheme(themeName: string) {
  localStorage.setItem('theme', themeName)
  applyTheme(themeName)
}

/**
 * 应用主题到CSS变量
 */
export function applyTheme(themeName: string) {
  const theme = themes[themeName] || themes.purple
  const root = document.documentElement

  root.style.setProperty('--theme-primary', theme.primary)
  root.style.setProperty('--theme-secondary', theme.secondary)
  root.style.setProperty('--theme-gradient', theme.gradient)
  root.style.setProperty('--theme-gradient-from', theme.gradientFrom)
  root.style.setProperty('--theme-gradient-to', theme.gradientTo)
  root.style.setProperty('--theme-accent', theme.accent)
  root.style.setProperty('--theme-background', theme.background)
  root.style.setProperty('--theme-card-bg', theme.cardBg)
  root.style.setProperty('--theme-text', theme.text)
  root.style.setProperty('--theme-text-secondary', theme.textSecondary)
  root.style.setProperty('--theme-border', theme.border)
  
  root.setAttribute('data-theme', themeName)
}

/**
 * 初始化主题
 */
export function initTheme() {
  const currentTheme = getCurrentTheme()
  applyTheme(currentTheme)
}

